<template>
    <!-- <h2>添加</h2> -->
    <!-- 用form写一个原生表单，包括标题标签，标签输入框，日期标签，代办日期。-->
    <form>
        <label for="title">标题 :</label>
        <input type="text"
            id="title"
            v-model="title"
            placeholder="请输入代办标题">&nbsp;&nbsp;
        <label for="date">日期 :</label>
        <input type="date"
            id="date"
            v-model="date"
            placeholder="请输入代办日期">
        <br>
        <br>
        <!-- 使用v-on:click绑定事件，点击添加按钮时调用addItem方法 -->
        <!-- 使用v-on:click绑定事件，点击提交按钮时调用submit方法 -->
        <button type="button"
            v-on:click="submit">提交</button>&nbsp;&nbsp;
        <button type="button"
            v-on:click="addItem">添加</button>
    </form>
    <br>
    <!-- 使用table写一个带边框的表格，表头单元格内容为标题、日期、操作 -->
    <table border="1"
        :width="700">
        <thead>
            <tr>
                <th>标题</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
            <!-- <tr>
                <td>哔哔</td>
                <td>2023-03-02</td>
                <th>

                    <button type="button"
                        v-on:click="editItem">编辑</button>&nbsp;&nbsp;&nbsp;

                    <button type="button"
                        v-on:click="deleteItem">删除</button>
                </th>
            </tr> -->
        </thead>
        <tbody>
            <!-- 使用v-for循环遍历list数组，每个数组元素都是一个对象，包含title和date两个属性 -->
            <tr v-for="(item, index) in list"
                :key="index">
                <!-- 使用v-text指令将item.title渲染到表格单元格中 -->
                <td >{{item.title}}</td>
                <!-- 使用v-text指令将item.date渲染到表格单元格中 -->
                <td >{{item.date}}</td>
                <!-- 使用v-on:click绑定事件，点击删除按钮时调用removeItem方法 -->
                <!-- 使用v-on:click绑定事件,点击编辑按钮时调用用editItem方法 -->
                <td>
                    <button type="button"
                        v-on:click="editItem(index)">编辑</button>
                    <button type="button"
                        v-on:click="removeItem(index)">删除</button>
                </td>
            </tr>
        </tbody>

    </table>
</template>


<script>
export default {
    name: 'TodoList',
    data() {
        return {
            title: '',
            date: '',
            list: []
        };
    },
    methods: {
        submit() {
            // 刷新页面后,将数据存储到本地
            if (localStorage.getItem('list')) {
                this.list = JSON.parse(localStorage.getItem('list'))
            }

            // 一进入页面,将数据渲染到页面中
            window.onbeforeunload = () => {
                //点击提交按钮保存到本地
                localStorage.setItem('list', JSON.stringify(this.list))
            }
        },
        addItem() {
            // 如果标题或日期为空，提示用户
            if (!this.title || !this.date) {
                alert('标题或日期不能为空');
                return;
            }
            // 否则，将标题和日期添加到list数组中
            this.list.push({
                title: this.title,
                date: this.date
            });
            // 清空标题和日期
            this.title = '';
            this.date = '';
        },
        removeItem(index) {
            // 根据索引删除数组中的元素
            this.list.splice(index, 1);
        },
        // 点击按钮编辑
        editItem(index) {
            //点击编辑按钮，修改当前的标题和日期
            // console.log(this.list.[index])
            console.log(this.list[index].title)
            console.log(this.list[index].date)
            const { title, date } = this.list[index];
            this.title = title;
            this.date = date;
        },
    }
};
</script>

<style lang="less" scoped >
/* 给table添加样式 */
.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    text-align: center;
    margin-top: 20px;

    th {
        border: 1px solid #ccc;
        padding: 10px;
    }

    td {
        border: 1px solid #ccc;
        padding: 10px;
    }
}</style>